<template>
  <div class="setting-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 表格 -->
        <el-tab-pane label="角色管理" name="first">
          <el-button type="primary" size="mini" style="margin-bottom:30px" @click="addHanler">新增角色</el-button>
          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            border
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
          >
            <el-table-column
              type="index"
              label="序号"
              width="150"
              :index="indexAdd"
              prop="id"
            />
            <el-table-column
              label="角色"
              width="250"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="description"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="success" size="mini">分配权限</el-button>
                <!-- 接收当前点击的那条数据 -->
                <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="queryObj.pagesize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新增角色 -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '添加角色'"
      :visible.sync="dialogFormVisible"
    >
      <roleDia
        v-if="dialogFormVisible"
        ref="roleDia"
        :is-edit="isEdit"
        :row="row"
        @success="success"
      />
    </el-dialog>
  </div>
</template>
<script>
// addSettings
import { getRoles, delRoles } from '@/api/settings'
import roleDia from './setAddDia.vue'
export default {
  name: 'Settings',
  components: { roleDia },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      queryObj: {
        page: 1,
        pagesize: 2
      },
      total: 0,
      dialogFormVisible: false,
      isEdit: false,
      row: {}
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取 角色列表
    async loadRoles() {
      const res = await getRoles({ ...this.queryObj })
      console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryObj.page = val
      this.loadRoles()
    },
    // 删除
    async handleDelete(id) {
      // console.log(id)
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(res)

      if (res === 'confirm') {
        const result = await delRoles(id)
        // console.log(result)

        if (result.code === 10000) {
          if (this.total % this.queryObj.pagesize !== 0 && this.queryObj.page > 1) {
            this.queryObj.page--
          }
          // 成功后=====刷新页面
          this.loadRoles()
        }
      }
    },
    // 编辑
    handleEdit(row) {
      this.dialogFormVisible = true
      this.isEdit = true
      this.row = row // 将当前点击的那条数据赋值给 row，然后通过父传子给子组件侦听
      console.log(row, 12123)
      // console.log(this.tableData, 2222)
    },
    // 新增
    addHanler() {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    // 分页序号递增
    indexAdd(index) {
      console.log(index, 8978798779)
      // 当前页码 - 1 乘 每页条数 加上 下标 + 1 等于 分页递增
      return index + 1 + (this.queryObj.page - 1) * this.queryObj.pagesize
    },
    // 子传父 提交后 关闭对话框 + 重新渲染 + 重置
    success() {
      this.dialogFormVisible = false
      this.loadRoles()

      // 获取子组件的 cancel() 函数方法
      this.$refs.roleDia.cancel()
    }
  }
}
</script>
<style lang='scss'  scoped>
.setting-container {
  padding: 20px 30px;
}
</style>
